<template>
  <div class="product-client">
    <NavItem :p-style="{

      textAlign: 'left'
    }">
      <template #title>
        保护客户端
      </template>
    </NavItem>
    <div class="card-display">
      <div v-for="(card, index) in cards" :key="index" class="card">
        <div class="card-header">
          <span class="card-title">{{ card.title }}</span>
          <span class="card-status" :class="{ 'success': card.status === '成功', 'failure': card.status === '失败' }">
            {{ card.status }}
          </span>
        </div>
        <div class="card-content">
          <div v-for="(number, i) in card.numbers" :key="i" class="number-item">
            {{ number }}
          </div>
        </div>
      </div>
    </div>
    <div class="client-table">

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="bar" label="Bar" width="80" />
        <el-table-column prop="her" label="Her" width="80" />
        <el-table-column prop="gk" label="Gk" width="80" />
        <el-table-column prop="type" label="Type" width="80" />
        <el-table-column prop="createTime" label="CreateTime" width="80" />
        <el-table-column prop="strategy" label="Strategy" width="80" />
        <el-table-column prop="plan" label="Plan" width="50" />
        <el-table-column prop="status" label="Status" />
      </el-table>

    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
//引入公共组件
import NavItem from '@/components/NavItem.vue'
const cards = [
  {
    title: "+P BE",
    status: "成功",
    numbers: [126, 2, 2]
  },
  {
    title: "wee",
    status: "失败",
    numbers: [67, 8, 8]
  },
  {
    title: "接管 FRM",
    status: "成功",
    numbers: [41, 0, 0]
  }
]
//客户端表格数据
const tableData = ref([
  {
    bar: '/rorke/archive-local/61',
    her: '/data/rorke/dst/',
    gk: '本地',
    type: '全基',
    createTime: '2023-2-2 11:29:34',
    strategy: '循环',
    plan: '每天 11:29:34 执行一次',
    status: '目的目录异常'
  },
  {
    bar: '/rorke/archive-local/61',
    her: '/data/rorke/dst/',
    gk: '本地',
    type: '全基',
    createTime: '2023-2-2 11:29:34',
    strategy: '循环',
    plan: '每天1129.34 执行一次',
    status: '目的目录异常'
  },
  {
    bar: '/rorke/archive-local/61',
    her: '/data/rorke/dst/',
    gk: '本地',
    type: '全基',
    createTime: '2023-2-2 11:29:34',
    strategy: '循环',
    plan: '每天 11:29:34 执行一次',
    status: '目的目录异常'
  }
]);
</script>
<style scoped lang="scss">
.product-client {
  /* padding: 20px; */
  height: 550px;

  .card-display {
    display: flex;
    gap: 20px;
    padding: 20px;
  }

  .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    width: 150px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }

  .card-title {
    font-weight: bold;
  }

  .card-status {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
  }

  .success {
    background-color: #e6f7e6;
    color: #52c41a;
  }

  .failure {
    background-color: #fff1f0;
    color: #f5222d;
  }

  .card-content {
    display: flex;
    justify-content: space-around;
  }

  .number-item {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }

  .client-table {
    border-radius: 4px;

    .el-table {
      font-size: 8px;

      .el-table :deep(.cell) {
        white-space: pre-line;
      }

    }
  }
}
</style>
